<template>
  <div class="password">
    <van-nav-bar
      title="重置密码"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <div class="content">
      <van-form class="login-form" @submit="onSubmit">
        <van-field
          v-model="loginForm.account"
          class="el-form-item"
          name="account"
          label="用户名"
          readonly="true"
          placeholder="用户名"
          :rules="[{ required: true, patAccount, message: '请填写用户名' }]"
        />
        <van-field
          v-model="loginForm.oldPassword"
          class="el-form-item"
          type="password"
          name="oldPassword"
          label="旧密码"
          placeholder="旧密码"
          :rules="[{ required: true, patPassWord, message: '请填写旧密码' }]"
        />
        <van-field
          v-model="loginForm.newPassword"
          class="el-form-item"
          type="password"
          name="newPassword"
          label="新密码"
          placeholder="新密码"
          :rules="[{ required: true, patPassWord, message: '请填写新密码' }]"
        />
        <van-field
          v-model="loginForm.newPassword1"
          class="el-form-item"
          type="password"
          name="newPassword1"
          label="确认新密码"
          placeholder="确认新密码"
          :rules="[
            { required: true, patPassWord, message: '请填写确认新密码' },
          ]"
        />

        <van-button type="default" block native-type="submit" class="subbtn">
          提交
        </van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Notify } from 'vant'
import { getUser } from '/@/util/auth'
import { upPassWord } from '/@/api/login/login'

export default defineComponent({
  components: {},
  setup(props, context) {
    const router = useRouter()
    const ctr_user = JSON.parse(getUser())
    const loginForm = reactive({
      tenantId: '',
      account: ctr_user.account,
      password: '',
      code: '',
    })
    const patAccount = /^[a-zA-Z0-9]{3,30}$/
    const patPassWord = /^[a-zA-Z0-9]{4,8}$/
    const patPhone = /^1d{10}$/
    const parCarno = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    const patName = /^[a-zA-Z0-9_\u4e00-\u9fa5]{3,30}$ /
    return {
      loginForm,
      patAccount,
      patPassWord,
      patPhone,
      parCarno,
      patName,
      onClickLeft() {
        history.back()
      },
      onSubmit(values) {
        if (values.password2 != values.password) {
          Notify({
            type: 'warning',
            message: '两次输入密码不一致!',
          })
          return
        }
        values.userId = ctr_user.userId
        upPassWord(values).then((res) => {
          Notify({
            type: 'success',
            message: '密码修改成功!',
          })
          router.push({
            name: 'Me',
          })
        })
      },
    }
  },
})
</script>

<style lang="less" scoped>
.password {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100vh;
  overflow-y: auto;
  background: url('../imgs/bg2.png') no-repeat center/cover;
}

.content {
  box-sizing: border-box;
  min-height: calc(100vh - 56px);
  padding: 45px 15px 15px 15px;
}

.login-form {
  margin-top: 15px;
}

.login-form .el-form-item {
  margin-bottom: 12px;
  opacity: 0.8;
}

.subbtn {
  opacity: 0.8;
  margin-top: 30px;
}

/deep/ .van-radio__label {
  color: #3071b9;
}
</style>
